<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>竞赛呈现页面</title>
    <link href="${ctxStatic}/race/css/index.css" rel="stylesheet">

    <%--倒计时--%>
    <script type="text/javascript">

        window.onload = myfun;
        var time = 0;
        var secondCount = 0;
        function myfun() {

            time = document.getElementById("time").value;
            secondCount = document.getElementById("secondCount").value;
            aa();
            console.info(time);
            if(time==""){
                alert("赛程未开启");
            }

        }

        function aa() {


            var intDiff = parseInt(time);//倒计时总秒数量


            function timer(intDiff) {
                window.setInterval(function () {
                    var day = 0,
                            hour = 0,
                            minute = 0,
                            second = 0;//时间默认值
                    if (intDiff > 0) {
                        day = Math.floor(intDiff / (60 * 60 * 24));
                        hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                        minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                        second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                    }
                    if (minute <= 9) minute = '0' + minute;
                    if (second <= 9) second = '0' + second;
                    $('#day_show').html(day + "天");
                    $('#hour_show').html('<s id="h"></s>' + hour + '时');
                    $('#minute_show').html('<s></s>' + minute + '分');
                    $('#second_show').html('<s></s>' + second + '秒');
                    intDiff--;
                    secondCount++;

                }, 1000);
            }

            $(function () {
                timer(intDiff);
            });

        }
    </script>

</head>
<body class="wzlm-bg">
<div class="wzlm-logo">
    <img src="${ctxStatic}/race/image/logo.gif">
</div>

<div class="wzlm-name">
    <!--<span class="wzlm-name1" >赛</span>-->
    <!--<span class="wzlm-name2" >程</span>-->
    <!--<span class="wzlm-name3" >名</span>-->
    <!--<span class="wzlm-name4" >称</span>-->
    <%--<img src="${ctxStatic}/race1/image/赛程名称.png">--%>
    <span class="wzlm-name2"> ${raceSchedule.scheduleName}</span>
</div>
<div class="wzlm-main">
    <div class="wzlm-top">
        <div class="wzlm-top-l">
            <!--<span>赛</span>-->
            <!--<span>事</span>-->
            <!--<span>名</span>-->
            <!--<span>称</span>-->
            <%--<img src="${ctxStatic}/race1/image/赛程名称.png">--%>
            <span> ${raceSchedule.scheduleName}</span>
        </div>
        <div class="wzlm-top-r">
            <span class="wzlm-title">倒计时</span>
            <%--<div class="wzlm-top-time" style="text-shadow: 0px 0px 20px #fff;">12:12:00</div>--%>
            <div class="wzlm-top-time" style="text-shadow: 0px 0px 20px #fff;">
                <span>
                    <input id="time" type="hidden" value="${time}">
                      <input id="secondCount" type="hidden" value="0">

                   <strong id="day_show"> 0时</strong>
				  <strong id="hour_show"> 0时</strong>
		          <strong id="minute_show">0分</strong>
		          <strong id="second_show">0秒</strong>
                    </span>
            </div>
        </div>
        <div class="clearfloat wzlm-content">
            <div class="wzlm-content-l">
                <span class="wzlm-title">竞赛队伍排名</span>
                <ul class="wzlm-list">
                    <li onclick="shownum(1)"> 1-10</li>
                    <li onclick="shownum(11)">11-20</li>
                    <li onclick="shownum(21)">21-30</li>
                    <li onclick="shownum(31)">31-40</li>
                    <li onclick="shownum(41)">41-50</li>
                </ul>
                <table class="wzlm-table-total" cellpadding="0" cellspacing="0" id="total_table">
                    <tr>
                        <th>排名</th>
                        <th>团队名称</th>
                        <th>总得分</th>
                    </tr>

                    <c:forEach begin="0" end="9" step="1" items="${raceScheduleTeamSubjects}" var="teams"
                               varStatus="teamIndex">
                        <tr>
                            <td>第${teamIndex.count}</td>
                            <td> ${teams.teamid}</td>
                            <td> ${teams.score}</td>
                        </tr>

                    </c:forEach>

                </table>
            </div>
            <div class="wzlm-content-r">
                <div class="wzlm-cr-order">
                    <span class="wzlm-title">最新FLY排名</span>

                    <div class="wzlm-cro-content">
                        <c:forEach items="${flags}" var="flag">
                            <p> ${flag}</p>
                        </c:forEach>

                    </div>
                </div>
                <div class="wzlm-cr-table">
                    <span class="wzlm-title">答题情况</span>

                    <div>
                        <table class="wzlm-table-detail" cellpadding="0" cellspacing="0" id="detail_table">
                            <tr>
                                <th>团队名称</th>
                                <c:forEach items="${raceCtfSubjects}" var="raceCtfSubject">
                                    <th>
                                            ${raceCtfSubject.ctfSubjectName}
                                    </th>
                                </c:forEach>
                            </tr>
                            <c:forEach items="${raceScheduleTeamSubjects}" var="raceScheduleTeamSubject"
                                       varStatus="RSTSIndex">
                                <c:if test="${RSTSIndex.index + 1 <= 10}">
                                    <tr id="answer${RSTSIndex.index + 1}" style="line-height: 30px">
                                            <%--<td><img src="${raceScheduleTeamSubject.teamLogo}">${raceScheduleTeamSubject.teamid}</td>--%>
                                        <td>${raceScheduleTeamSubject.teamid}</td>
                                        <c:forEach items="${raceCtfSubjects}" var="raceCtfSubject">
                                            <td>
                                                <c:forEach items="${raceScheduleTeamSubjectList}"
                                                           var="raceScheduleTeamSubjectList">
                                                    <%--raceScheduleTeamSubjectList.subjectid ---> 里面的是团队id --%>
                                                    <c:if test="${raceScheduleTeamSubject.scheduleid == raceScheduleTeamSubjectList.teamid && raceScheduleTeamSubjectList.subjectid==raceCtfSubject.id}">
                                                        <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '0'}"></c:if>
                                                        <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '1'}">正确</c:if>
                                                        <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '2'}">错误</c:if>
                                                    </c:if>
                                                </c:forEach>
                                            </td>
                                        </c:forEach>
                                    </tr>
                                </c:if>
                            </c:forEach>
                        </table>

                    </div>
                </div>
            </div>
        </div>
        <div class="wzlm-bottom">
            <span class="wzlm-title">竞赛队伍得分情况</span>

            <div class="wzlm-b-table" id="table_img">
                <!--<div style="height: 500px;width:900px;background-color: #fff;margin: auto;">-->
                <!--<img src="image/tubiao.png">-->
                <div class="box-header with-border" style="text-align: center;">
                    <h3 class="box-title">王者联盟赛事统计</h3>
                </div>
                <div class="box-body">
                    <div class="chart" id="lineChartPNode">
                        <canvas id="lineChart"></canvas>
                    </div>
                </div>
                <!--</div>-->
            </div>
        </div>
    </div>
</div>
</body>
<script src="${ctxStatic}/race/js/jquery-2.2.3.min.js"></script>
<script src="${ctxStatic}/race/js/Chart.min.js"></script>

<script>

    console.info(${refreshSize});
    var currentCount = 1;
    var refreshSize = ${refreshSize}
            setInterval("shownum(1)", refreshSize * 1000 * 60);//1000为1秒钟
    function shownum(i) {
//        alert(i);
        console.info(i);
        if (i > 50) {
            window.location.reload();
        }
        currentCount = i + 10;

        $('#lineChart').remove(); // this is my <canvas> element
        $('#lineChartPNode').append('<canvas id="lineChart"></canvas>');

        //竞赛队伍排名
        var str = '<tr><th>排名</th><th>团队名</th><th>得分</th></tr>';
//        ajax获取数据
        var teamnum = '';
        var teamname = '';
        var teamcoal = '';
        var strdk = '';
        var strdh = '';
        var count = '';
        var coal = '';
        if (i == 1) {

            var count = i;
            var strd = '<tr><th>团队名称</th>';
            <c:forEach var="timu" items="${raceCtfSubjects}">
            strd += '<th>${timu.ctfSubjectName}</th>';
            </c:forEach>
            strd += '</th>';

            <c:forEach begin="0" end="9" step="1" items="${raceScheduleTeamSubjects}" var="teams" varStatus="teamIndex">
            teamnum = '第' + count;
            count++;
            teamname = "${teams.teamid}";
            teamcoal = "${teams.score}";


            //     竞赛队伍排名html
            str += '<tr><td>' + teamnum + '</td><td>' + teamname + '</td><td>' + teamcoal + '</td></tr>';

            <c:forEach items="${raceCtfSubjects}" var="raceCtfSubject">
            <c:forEach  items="${raceScheduleTeamSubjectList}" var="juge">
            <c:if test="${teams.scheduleid == juge.teamid && juge.subjectid==raceCtfSubject.id}">
            <c:if test="${juge.rightandwrong == '0'}">
            coal = "";
            </c:if>
            <c:if test="${juge.rightandwrong == '1'}">
            coal = "正确";
            </c:if>
            <c:if test="${juge.rightandwrong == '2'}">
            coal = "错误";
            </c:if>
            </c:if>
            </c:forEach>

            strdh += '<td>' + coal + '</td>';
            </c:forEach>
            strdk += '<tr><td>' + teamname + '</td>' + strdh + '</tr>';
            strdh = '';
            </c:forEach>

            //        答题情况html
            strd += strdk;

        }
        if (i == 11) {
            var count = i;
            var strd = '<tr><th>团队名称</th>';
            <c:forEach var="timu" items="${raceCtfSubjects}">
            strd += '<th>${timu.ctfSubjectName}</th>';
            </c:forEach>
            strd += '</th>';

            <c:forEach begin="10" end="19" step="1" items="${raceScheduleTeamSubjects}" var="teams">
            teamnum = '第' + count;
            count++;
            teamname = "${teams.teamid}";
            teamcoal = "${teams.score}";

            //     竞赛队伍排名html
            str += '<tr><td>' + teamnum + '</td><td>' + teamname + '</td><td>' + teamcoal + '</td></tr>';

            <c:forEach items="${raceCtfSubjects}" var="raceCtfSubject">
            <c:forEach  items="${raceScheduleTeamSubjectList}" var="juge">
            <c:if test="${teams.scheduleid == juge.teamid && juge.subjectid==raceCtfSubject.id}">
            <c:if test="${juge.rightandwrong == '0'}">
            coal = "";
            </c:if>
            <c:if test="${juge.rightandwrong == '1'}">
            coal = "正确";
            </c:if>
            <c:if test="${juge.rightandwrong == '2'}">
            coal = "错误";
            </c:if>
            </c:if>
            </c:forEach>

            strdh += '<td>' + coal + '</td>';
            </c:forEach>
            strdk += '<tr><td>' + teamname + '</td>' + strdh + '</tr>';
            strdh = '';
            </c:forEach>

            //        答题情况html
            strd += strdk;
        }

        if (i == 21) {
            var count = i;
            var strd = '<tr><th>团队名称</th>';
            <c:forEach var="timu" items="${raceCtfSubjects}">
            strd += '<th>${timu.ctfSubjectName}</th>';
            </c:forEach>
            strd += '</th>';

            <c:forEach begin="20" end="29" step="1" items="${raceScheduleTeamSubjects}" var="teams">
            teamnum = '第' + count;
            count++;
            teamname = "${teams.teamid}";
            teamcoal = "${teams.score}";

            //     竞赛队伍排名html
            str += '<tr><td>' + teamnum + '</td><td>' + teamname + '</td><td>' + teamcoal + '</td></tr>';

            <c:forEach items="${raceCtfSubjects}" var="raceCtfSubject">
            <c:forEach  items="${raceScheduleTeamSubjectList}" var="juge">
            <c:if test="${teams.scheduleid == juge.teamid && juge.subjectid==raceCtfSubject.id}">
            <c:if test="${juge.rightandwrong == '0'}">
            coal = "";
            </c:if>
            <c:if test="${juge.rightandwrong == '1'}">
            coal = "正确";
            </c:if>
            <c:if test="${juge.rightandwrong == '2'}">
            coal = "错误";
            </c:if>
            </c:if>
            </c:forEach>

            strdh += '<td>' + coal + '</td>';
            </c:forEach>
            strdk += '<tr><td>' + teamname + '</td>' + strdh + '</tr>';
            strdh = '';
            </c:forEach>

            //        答题情况html
            strd += strdk;
        }


        if (i == 31) {
            var count = i;
            var strd = '<tr><th>团队名称</th>';
            <c:forEach var="timu" items="${raceCtfSubjects}">
            strd += '<th>${timu.ctfSubjectName}</th>';
            </c:forEach>
            strd += '</th>';

            <c:forEach begin="30" end="39" step="1" items="${raceScheduleTeamSubjects}" var="teams">
            teamnum = '第' + count;
            count++;
            teamname = "${teams.teamid}";
            teamcoal = "${teams.score}";

            //     竞赛队伍排名html
            str += '<tr><td>' + teamnum + '</td><td>' + teamname + '</td><td>' + teamcoal + '</td></tr>';

            <c:forEach items="${raceCtfSubjects}" var="raceCtfSubject">
            <c:forEach  items="${raceScheduleTeamSubjectList}" var="juge">
            <c:if test="${teams.scheduleid == juge.teamid && juge.subjectid==raceCtfSubject.id}">
            <c:if test="${juge.rightandwrong == '0'}">
            coal = "";
            </c:if>
            <c:if test="${juge.rightandwrong == '1'}">
            coal = "正确";
            </c:if>
            <c:if test="${juge.rightandwrong == '2'}">
            coal = "错误";
            </c:if>
            </c:if>
            </c:forEach>

            strdh += '<td>' + coal + '</td>';
            </c:forEach>
            strdk += '<tr><td>' + teamname + '</td>' + strdh + '</tr>';
            strdh = '';
            </c:forEach>

            //        答题情况html
            strd += strdk;
        }

        if (i == 41) {
            var count = i;
            var strd = '<tr><th>团队名称</th>';
            <c:forEach var="timu" items="${raceCtfSubjects}">
            strd += '<th>${timu.ctfSubjectName}</th>';
            </c:forEach>
            strd += '</th>';

            <c:forEach begin="40" end="49" step="1" items="${raceScheduleTeamSubjects}" var="teams">
            teamnum = '第' + count;
            count++;
            teamname = "${teams.teamid}";
            teamcoal = "${teams.score}";

            //     竞赛队伍排名html
            str += '<tr><td>' + teamnum + '</td><td>' + teamname + '</td><td>' + teamcoal + '</td></tr>';

            <c:forEach items="${raceCtfSubjects}" var="raceCtfSubject">
            <c:forEach  items="${raceScheduleTeamSubjectList}" var="juge">
            <c:if test="${teams.scheduleid == juge.teamid && juge.subjectid==raceCtfSubject.id}">
            <c:if test="${juge.rightandwrong == '0'}">
            coal = "";
            </c:if>
            <c:if test="${juge.rightandwrong == '1'}">
            coal = "正确";
            </c:if>
            <c:if test="${juge.rightandwrong == '2'}">
            coal = "错误";
            </c:if>
            </c:if>
            </c:forEach>

            strdh += '<td>' + coal + '</td>';
            </c:forEach>
            strdk += '<tr><td>' + teamname + '</td>' + strdh + '</tr>';
            strdh = '';
            </c:forEach>

            //        答题情况html
            strd += strdk;
        }


        document.getElementById('total_table').innerHTML = str;
        document.getElementById('detail_table').innerHTML = strd;

        //重绘图标

        //队伍名
        <%--var teamNames = {};--%>
        <%--<c:forEach  items="${raceScheduleTeamSubjects}" var="teams" varStatus="count">--%>
        <%--var a = ${teams.teamid};--%>
        <%--teamNames[count.index] = a;--%>
        <%--</c:forEach>--%>

        <%--console.info(teamNames);--%>

        //队伍分数
        var teams = ${teamlist};
        var scoreData = {};
        var lenth = i + 9;
        var j = i - 1;
        for (i = i - 1; i < lenth; i++) {
            scoreData[i] = teams[i];
        }
        var first = scoreData[0 + j];
        var second = scoreData[1 + j];
        var third = scoreData[2 + j];
        var forth = scoreData[3 + j];
        var five = scoreData[4 + j];
        var six = scoreData[5 + j];
        var seven = scoreData[6 + j];
        var eight = scoreData[7 + j];
        var ninth = scoreData[8 + j];
        var ten = scoreData[9 + j];
        //团队名称
        var teamNames = ${teamNames};
        var firstn = teamNames[0 + j];
        var secondn = teamNames[1 + j];
        console.log(firstn);
        console.log(secondn);


        var thirdn = teamNames[2 + j];
        var forthn = teamNames[3 + j];
        var fiven = teamNames[4 + j];
        var sixn = teamNames[5 + j];
        var sevenn = teamNames[6 + j];
        var eightn = teamNames[7 + j];
        var ninthn = teamNames[8 + j];
        var tenn = teamNames[9 + j];

        var displaySizeList = ${displaySizeList};
        var areaChartData = {
            labels: displaySizeList,
            datasets: [
                {
                    label: firstn,
                    fillColor: "rgba(210, 214, 222, 1)",
                    strokeColor: "rgba(210, 214, 222, 1)",
                    pointColor: "rgba(210, 214, 222, 1)",
                    pointStrokeColor: "#c1c7d1",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: first
                },
                {
                    label: secondn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "rgba(60,141,188,0.8)",
                    pointColor: "#3b8bba",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: second
                },
                {
                    label: thirdn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "red",
                    pointColor: "red",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: third
                },
                {
                    label: forthn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "yellow",
                    pointColor: "yellow",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: forth
                },
                {
                    label: fiven,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "pink",
                    pointColor: "pink",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: five
                },
                {
                    label: sixn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "brown",
                    pointColor: "brown",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: six
                },
                {
                    label: sevenn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "aqua",
                    pointColor: "aqua",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
//                    data: [11, 15, 25, 26, 31, 37, 41]
                    data: seven
                },
                {
                    label: eightn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "darkorange",
                    pointColor: "darkorange",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: eight
                },
                {
                    label: ninthn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "darkmagenta",
                    pointColor: "darkmagenta",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: ninth
                },
                {
                    label: tenn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "chartreuse",
                    pointColor: "chartreuse",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: ten
                }
            ]
        };

        var areaChartOptions = {
            //Boolean - If we should show the scale at all
            showScale: true,
            //Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: true,
            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",
            //Number - Width of the grid lines
            scaleGridLineWidth: 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            //Boolean - Whether the line is curved between points
            bezierCurve: false,
            //Number - Tension of the bezier curve between points
            bezierCurveTension: 0.3,
            //Boolean - Whether to show a dot for each point
            pointDot: true,
            //Number - Radius of each point dot in pixels
            pointDotRadius: 4,
            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth: 1,
            //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
            pointHitDetectionRadius: 20,
            //Boolean - Whether to show a stroke for datasets
            datasetStroke: true,
            //Number - Pixel width of dataset stroke
            datasetStrokeWidth: 2,
            //Boolean - Whether to fill the dataset with a color
            datasetFill: true,
            //String - A legend template
            <%--legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",--%>
            //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio: true,
            //Boolean - whether to make the chart responsive to window resizing
            responsive: true
        };

        //Create the line chart
//        areaChart.Line(areaChartData, areaChartOptions);

        //-------------
        //- LINE CHART -
        //--------------
        var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
        var lineChart = new Chart(lineChartCanvas);
        var lineChartOptions = areaChartOptions;
        lineChartOptions.datasetFill = false;
        lineChart.Line(areaChartData, lineChartOptions);

    }

</script>


<%--<input id="" value="${teamlist}">--%>

<%--<c:forEach   items="${teamlist}" var="teams" varStatus="teamsIndex">--%>
<%--<c:forEach  items="${teams}" var="team"  varStatus="teamIndex">--%>
<%----%>
<%--</c:forEach>--%>
<%--</c:forEach>--%>



<script>
    $(function () {
        /* ChartJS
         * -------
         * Here we will create a few charts using ChartJS
         */

        var totalTiem =  ${time};
        console.info(totalTiem / 60 / 5);


        var teams = ${teamlist};
        var scoreData = {};
        for (var i = 0; i < 10; i++) {
            scoreData[i] = teams[i];
        }
        var first = scoreData[0];
        var second = scoreData[1];
        var third = scoreData[2];
        var forth = scoreData[3];
        var five = scoreData[4];
        var six = scoreData[5];
        var seven = scoreData[6];
        var eight = scoreData[7];
        var ninth = scoreData[8];
        var ten = scoreData[9];

        //团队名称
        var teamNames = ${teamNames};
        var firstn = teamNames[0];
        var secondn = teamNames[1];
        var thirdn = teamNames[2];
        var forthn = teamNames[3];
        var fiven = teamNames[4];
        var sixn = teamNames[5];
        var sevenn = teamNames[6];
        var eightn = teamNames[7];
        var ninthn = teamNames[8];
        var tenn = teamNames[9];

        var displaySizeList = ${displaySizeList};

        var areaChartData = {
            labels: displaySizeList,
            datasets: [
                {
                    label: firstn,
                    fillColor: "rgba(210, 214, 222, 1)",
                    strokeColor: "rgba(210, 214, 222, 1)",
                    pointColor: "rgba(210, 214, 222, 1)",
                    pointStrokeColor: "#c1c7d1",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: first
                },
                {
                    label: secondn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "rgba(60,141,188,0.8)",
                    pointColor: "#3b8bba",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: second
                },
                {
                    label: thirdn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "red",
                    pointColor: "red",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: third
                },
                {
                    label: forthn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "yellow",
                    pointColor: "yellow",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: forth
                },
                {
                    label: fiven,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "pink",
                    pointColor: "pink",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: five
                },
                {
                    label: sixn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "brown",
                    pointColor: "brown",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: six
                },
                {
                    label: sevenn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "aqua",
                    pointColor: "aqua",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
//                    data: [11, 15, 25, 26, 31, 37, 41]
                    data: seven
                },
                {
                    label: eightn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "darkorange",
                    pointColor: "darkorange",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: eight
                },
                {
                    label: ninthn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "darkmagenta",
                    pointColor: "darkmagenta",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: ninth
                },
                {
                    label: tenn,
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "chartreuse",
                    pointColor: "chartreuse",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: ten
                }
            ]
        };

        var areaChartOptions = {
            //Boolean - If we should show the scale at all
            showScale: true,
            //Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: true,
            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",
            //Number - Width of the grid lines
            scaleGridLineWidth: 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            //Boolean - Whether the line is curved between points
            bezierCurve: false,
            //Number - Tension of the bezier curve between points
            bezierCurveTension: 0.3,
            //Boolean - Whether to show a dot for each point
            pointDot: true,
            //Number - Radius of each point dot in pixels
            pointDotRadius: 4,
            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth: 1,
            //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
            pointHitDetectionRadius: 20,
            //Boolean - Whether to show a stroke for datasets
            datasetStroke: true,
            //Number - Pixel width of dataset stroke
            datasetStrokeWidth: 2,
            //Boolean - Whether to fill the dataset with a color
            datasetFill: true,
            //String - A legend template
            <%--legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",--%>
            //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio: true,
            //Boolean - whether to make the chart responsive to window resizing
            responsive: true
        };

        //Create the line chart
//        areaChart.Line(areaChartData, areaChartOptions);

        //-------------
        //- LINE CHART -
        //--------------
        var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
        var lineChart = new Chart(lineChartCanvas);
        var lineChartOptions = areaChartOptions;
        lineChartOptions.datasetFill = false;
        lineChart.Line(areaChartData, lineChartOptions);

    });

</script>
<%--<script type="text/javascript" src="${ctxStatic}/race/js/index.js"></script>--%>
</html>